<template>
	<z-paging ref="paging" :refresher-out-rate="0.8" :show-empty-view-reload-when-error="false"
		:empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
		empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
		empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
		empty-view-error-text="暂无数据" safe-area-inset-bottom bg-color="#F6F6F6" v-model="dataList" @query="queryList">
		<view slot="top">
			<view class="search">
				<u-search placeholder="请输关键词" v-model="keyword" bgColor="#E1E1E1" color="#333"
					placeholderColor="#999999" clearabled height="64rpx" @custom="keywordSearch"
					:actionStyle="actionStyle" />
			</view>

			<!-- 面包屑 -->
			<view class="navBox">
				<view class="yile-breadcrumb-con" :style="[mainStyle,ownStyle]">
					<view v-for="(item,index) in nav" :key="index">
						<text @click="onClick(item.parentId,item.isActive)"
							:style="[item.isActive?bcActColor:'']">{{item.value}}</text>
						<text v-if="index<nav.length-1">{{separator}}</text>
					</view>
					<view class="right" @click="toInviteMembers">
					 <image class="img" src="https://beeten-picks-file.oneredhealth.com/merchant/20251024/icon_1761286171644.png" mode="aspectFit"></image>	邀请成员
					</view>
				</view>
			</view>
		</view>
		<view class="cellBox">
			<view class="detail" v-for="(item, index) in dataList" :key="index">
				<view class="detail_title flex_wrap row_between row_middle" @click="item.id !== clickTeamId ? clickBtn(item) : ''">
					<view class="flex_wrap row_middle">
						<u-icon
						    :name="item.userCategory == 2 ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/3998c63cd7de4cd0937f9a8b027d0e98.png' : ([3, 4, 5].includes(item.userCategory) ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/b2bd88596c384ee1817c7d845f52f7fb.png' : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/f6ddf5eb988b43209951cd6b4782de43.png' )"
						    size="84rpx"
						/>
						<view class="">
							<view class="flex_wrap row_middle">
								<view><u-text :text="item.groupName" size="32rpx" color="#333" margin="0 24rpx 0 20rpx" />
								</view>
							</view>
							<u-text :text="` ${item.mobile || '-'}`" size="28rpx" color="#666"
								margin="20rpx 16rpx 0 20rpx" />
						</view>
					</view>
					<u-icon v-if='item.id !== clickTeamId' name="arrow-right" color="#777"
						size="36rpx" label="明细展示" labelPos="left" />
				</view>
				<view class="timeBox flex_wrap" >
					<u-text  v-if='item.id == clickTeamId' :text="`本人业绩：` + `${item.myPerformance}`" size="24rpx" />
					<u-text  v-if='item.id !== clickTeamId' :text="`总业绩展示：` + `${item.performance}`" size="24rpx" suffixIcon="arrow-right" iconStyle="font-size: 32rpx;color:#FE4934;" color="#FE4934"  @click="to_invitation(item)" />
					<u-text :text="`时间：` + `${item.createTime}`" size="24rpx" color="#666" />
				</view>
				
			</view>
		</view>
		 <u-popup
            :show="showShare"
            mode="bottom"
            @close="closeShare"
            @open="openShare"
            :closeable="true"
            @touchmove.stop.prevent="() => {}"
        >
            <view
                style="
                    height: 240rpx;
                    text-align: center;
                    font-size: 28rpx;
                    margin-top: 12rpx;
                "
                @touchmove.stop.prevent="() => {}"
            >
                <text>分享给</text>
                <view
                    class=""
                    style="
                        margin-top: 50rpx;
                        display: flex;
                        justify-content: center;
                    "
                >
                    <button open-type="share" >
                        <u-icon
                            name="/static/images/card/weixin.png"
                            size="40"
                            labelPos="bottom"
                            space="10"
                            label="微信好友"
                        />
                    </button>
                   
                </view>
            </view>
        </u-popup>
	</z-paging>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		teamRelationship,
		teamCustomerPage
	} from "@/api/login";
	export default {
		props: {
			separator: {
				type: String,
				default: '/'
			},
			statusIcon: {
				0: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/f6ddf5eb988b43209951cd6b4782de43.png",//3级
				1: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/f6ddf5eb988b43209951cd6b4782de43.png",//3级
				2: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/3998c63cd7de4cd0937f9a8b027d0e98.png",//2
				3: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/b2bd88596c384ee1817c7d845f52f7fb.png",//1
				4: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/b2bd88596c384ee1817c7d845f52f7fb.png",//1
				5: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/b2bd88596c384ee1817c7d845f52f7fb.png",//1
				6: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/07/15/f6ddf5eb988b43209951cd6b4782de43.png",//3级
			},
			size: {
				type: [String, Number],
				default: 14
			},
			color: {
				type: [String],
				default: '#6a6a6a'
			},
			actColor: {
				type: [String],
				default: '#3D3D3D'
			},
			marginTop: {
				type: [String, Number],
				default: ''
			},
			ownStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				showShare:false,
				actionStyle: {
					fontSize: "28rpx",
					color: "#333",
				},
				keyword: "",
				dataList: [],
				clickTeamId: '', //上级id
				nav: [{
					value: '区级', //名称
					parentId: '', //链接
					isActive: true //选中状态
				}],
				unit: '',
				unitId: '',
				clickUnit: ''
			};
		},
		computed: {
			...mapGetters(["isLogin", "phone","userInfo"]),
			//主样式
			mainStyle() {
				var style = {};

				//字体大小
				style.fontSize = this.getValue(this.size);
				//颜色
				style.color = this.color;
				//距离上一元素距离
				if (this.marginTop != '') style.marginTop = this.getValue(this.marginTop);

				return style;
			},
			//选中字体颜色
			bcActColor() {
				return {
					color: this.actColor,
					fontWeight: 'bolder'
				}
			},
		},
		onLoad(op) {
			console.log(op, 'op>>>>>')
			this.unit = op.unit
			this.unitId = op.unitId
			this.userCategory = op.userCategory
			if (this.unit) {
				this.nav = [{
					value: this.unit, // 使用 this.unit 的值
					parentId: this.unitId, // 默认空字符串
					isActive: true // 默认选中
				}];
			}
		},
		methods: {
			onShareAppMessage: function () {
            // APP端不支持wx.showShareMenu，删除相关调用
          
            const path = `/pages_activity/invitation/inviteMembers?name=${this.userInfo.salesmanName}&mobile=${this.userInfo.mobile}&avatar=${this.userInfo.avatar}`
            // 返回数据
            return {
                title:'',
                imageUrl: 'https://beeten-picks-file.oneredhealth.com/merchant/20251027/icon1_1761542754818.png',
                path,
            };
        },
			toInviteMembers(){
  				this.showShare = true;

				// uni.$u.route({
				// 	url: "/pages_activity/invitation/inviteMembers",
				// });
			},
		    closeShare() {
            this.showShare = false;
		    },
        openShare() {
            this.showShare = true;
        },
			to_invitation(item){
				uni.navigateTo({
				    url: `/pages_activity/invitation/index?id=${item.id}&groupName=${item.groupName}`,
				});
			},
			//获取大小（兼容任意格式，数字默认px）
			getValue(val) {
				const reg = /^[0-9]*$/g
				return (typeof val === 'number' || reg.test(val)) ? (val + 'px') : val;
			},
			//点击事件
			onClick(parentId, isActive) {
				if (parentId === this.unitId) {
					// 点击"区级"：重置nav
					this.clickUnit = ''
					this.nav = [{
						value: this.unit,
						parentId: this.unitId,
						isActive: true
					}];
				}
				this.nav = this.nav.map(item => ({
					...item,
					isActive: item.parentId === parentId
				}));
				this.clickTeamId = parentId
				console.log(parentId, this.clickTeamId)
				this.$refs.paging.reload();
			},

			clickBtn(item) {
				console.log(item, 'item>>>>');
				this.clickTeamId = item.id
				this.clickUnit = item.groupName
				this.$refs.paging.reload();
				// 1. 先更新原有 nav 项（isActive 设为 false）
				const updatedNav = this.nav.map(navItem => ({
					...navItem,
					isActive: false
				}));

				// 2. 检查当前点击的 item 是否已存在于 nav 中
				const existingItemIndex = updatedNav.findIndex(
					navItem => navItem.parentId === item.id
				);
				if (existingItemIndex >= 0) {
					// 如果已存在，更新它的 isActive 状态
					updatedNav[existingItemIndex].isActive = true;
				} else {
					// 如果不存在，添加新项
					updatedNav.push({
						value: item.groupName || '未命名', // 使用 item 的 name 或其他字段
						parentId: item.id,
						isActive: true
					});
				}
				// 3. 更新 nav 数据
				this.nav = updatedNav;

			},
			keywordSearch() {
				this.$refs.paging.reload();
			},
			async queryList(pageNo, pageSize) {
				let params = {
					pageNum: pageNo,
					pageSize: pageSize,
				};
				if (this.keyword) params.groupName = this.keyword;
				if (this.clickTeamId || this.unitId) params.groupParentId = this.clickTeamId ?  this.clickTeamId : this.unitId;
				let result = await teamRelationship(params);
				result.code === 200 &&
					this.$refs.paging.completeByTotal(
						result.data.rows,
						result.total
					);
			},
			// 	async queryList(pageNo, pageSize) {
			// 		let params = {
			// 			pageNum: pageNo,
			// 			pageSize: pageSize,
			// 		};

			// 		if (this.clickTeamId || this.unitId) params.parentId = this.clickTeamId ?  this.clickTeamId : this.unitId;

			// 		// 1. 先获取团队列表数据
			// 		let teamResult = this.userCategory == '2' ? '' : await teamRelationship(params);
			// 		console.log(teamResult, 'teamResult>>>>')

			// 		const customerParams = {
			// 			teamNames:this.clickUnit ? Array.of(this.clickUnit) : Array.of(this.unit),
			// 			pageNum: 1,
			// 			pageSize: 50,
			// 		};
			// 		if (this.keyword) customerParams.keyword = this.keyword;
			// 		if (this.userCategory == '2') customerParams.userCategory = '6';
			// 		const customerResult = await teamCustomerPage(customerParams);
			// 		console.log(customerResult, 'customerResult>>>')
			// 		const customerData = customerResult.data.rows || [];

			// 		// 4. 合并数据（根据你的需求调整合并方式）
			// 		// 方式1：直接合并两个数组
			// 		const combinedData = this.userCategory == '2' ? [...customerData] : [...teamResult.data.rows, ...customerData];
			// 		console.log(combinedData, 'combinedData>>>>>')
			// 		this.$refs.paging.completeByTotal(
			// 			combinedData, // 合并后的数据
			// 			teamResult.total // 总数（可能需要调整）
			// 		);
			// 	},
		},
	};
</script>

<style lang="scss" scoped>
::v-deep button{
	background: none;
}
	.topTabbar {
		background-color: #fff;
		padding-bottom: 16rpx;
	}

	.navBox {
		padding: 40rpx 0 2rpx 32rpx;
	}

	.scanLine {
		width: 0rpx;
		height: 26rpx;
		border: 2rpx solid #d8d8d8;
	}

	.cellBox {
		width: 92vw;
		margin: 0 auto;

		::v-deep .u-cell {
			box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);
			margin-top: 30rpx;
			border-radius: 20upx;
		}

		::v-deep .u-cell__body {}
	}

	.search {
		padding: 32rpx 28rpx 0;
	}

	.timeBox {
		padding: 18rpx 30rpx;
		border-top: 1px solid #f7f7f7;
	}

	.detail {
		width: 100%;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-top: 32rpx;
		background: #ffffff;

		&_title {
			width: 100%;
			padding: 26rpx 28rpx;
			box-sizing: border-box;
			position: relative;
		}

		&_title1 {
			width: 100%;
			padding: 18rpx;
			box-sizing: border-box;
			position: relative;
		}
	}

	.auditing,
	.auditing1 {
		width: 116rpx;
		height: 48rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		border: 2rpx solid #ff6a43;
		text-align: center;
		line-height: 48rpx;
		color: #ff6a43;
	}

	.auditing1 {
		border: 2rpx solid #588bf3;
		color: #588bf3;
	}

	.bottom {
		width: 100%;
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}




	.yile-breadcrumb-con {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		view text {
			margin-right: 15rpx;
		}

		view text.active {
			font-weight: bolder;
		}
		.right{
			display: flex;
			align-items: center;
			margin-right: 30rpx;
			.img{
				width: 32rpx;
				height: 32rpx;
				margin-right: 5rpx;
			}
		}
	}
</style>